<template>
  <div ref="tableComponentRef" class="tableComponent">
    <div
      v-if="
        formTable &&
          formTable.searchList &&
          formTable.searchList.length &&
          isSearch
      "
      ref="searchListRef"
      class="tableComponent-search"
    >
      <div class="tableComponent-search-first">
        <!-- <el-form inline label-width="100px"> -->
        <el-form label-width="100px">
          <el-row>
            <el-col
              v-for="item in formTable.searchList"
              :key="item.dataIndex"
              :span="6"
            >
              <el-form-item
                :label="item.title"
                :title="item.title"
              >
                <el-input
                  v-if="['input', 'text'].includes(item.componentType)"
                  v-model="formTable.searchObj[item.dataIndex]"
                  :placeholder="item.promptText || '请输入' + item.title"
                  clearable
                  @input="$forceUpdate()"
                  @keyup.enter.native="searchTable()"
                />
                <time-picker
                  v-else-if="dataPicker(item)"
                  v-model="formTable.searchObj[item.dataIndex]"
                  :type="dataPicker(item).type"
                  :value-format="dataPicker(item).format"
                  :personal-style="{
                    currentBorderRadius: '6px'
                  }"
                  :placeholder="item.promptText || '请选择'"
                  @blur="$forceUpdate()"
                  @change="$forceUpdate()"
                />
                <Select-Url
                  v-else-if="
                    ['select', 'enterpriseIn', 'enterpriseList'].includes(
                      item.componentType
                    )
                  "
                  ref="selectUrl"
                  :select-value="formTable.searchObj[item.dataIndex]"
                  :item="item"
                  :clearable="true"
                  :placeholder="item.promptText || '请选择'"
                  style="width: 100%;"
                  :data-dataIndex="item.dataIndex"
                  @change="obj => selectSearchChange(obj, item)"
                  @changeItemOption="changeItemOption"
                />
                <el-radio-group
                  v-else-if="['radio'].includes(item.componentType)"
                  v-model="formTable.searchObj[item.dataIndex]"
                >
                  <el-radio
                    v-for="radio in item.columnSelectOptions"
                    :key="radio[item.selectViewOptions.renderMapKey]"
                    :label="radio[item.selectViewOptions.renderkey]"
                  >{{ radio[item.selectViewOptions.renderValue] }}
                  </el-radio>
                  <!-- <el-radio
                v-for="radio in item.columnSelectOptions"
                :key="radio[item.selectViewOptions.renderMapKey]"
                :label="radio[item.selectViewOptions.renderValue]"
              >{{ radio[item.selectViewOptions.renderValue] }}
              </el-radio> -->
                </el-radio-group>
                <select-url-m
                  v-else-if="item.componentType === 'batchSelect'"
                  :select-value="formTable.searchObj[item.dataIndex]"
                  :item="item"
                  :placeholder="item.promptText || '请选择'"
                  style="width: 100%;"
                  :data-dataIndex="item.dataIndex"
                  @change="obj => selectSearchChange(obj, item)"
                />
                <SelectTree
                  v-else-if="
                    ['treeSelect', 'treeSelectBot', 'enterpriseListTree', 'enterpriseInTree'].includes(
                      item.componentType
                    )
                  "
                  :select-value="formTable.searchObj[item.dataIndex]"
                  :clearable="true"
                  :placeholder="item.promptText || '请选择'"
                  :item="item"
                  @clear="treeSelectSearchClear"
                  @changeData="data => treeSelectSearchChange(data, item)"
                />
                <select-tree-m
                  v-else-if="item.componentType === 'batchTreeSelect'"
                  :select-value="formTable.searchObj[item.dataIndex]"
                  :item="item"
                  :placeholder="item.promptText || '请选择'"
                  @selChange="arr => selChange(arr, item)"
                  @changeData="data => treeSelectSearchChange(data, item)"
                />
                <!-- 输入&下拉 -->
                <transition
                  v-else-if="item.componentType === 'toggleInputSelect'"
                  mode="out-in"
                  name="toggleIS"
                >
                  {{ item.myToggleFlag }}
                  <el-input
                    v-if="item.myToggleFlag"
                    ref="innerOper"
                    v-model="formTable.searchObj[item.dataIndex]"
                    :placeholder="item.promptText || '请输入'"
                    :class="{'myEllipsis': item.ellipsis === 1}"
                    style="width: 100%;height: 100%;"
                    clearable
                    :title="formTable.searchObj[item.dataIndex]"
                    :type="item.isNumber === 1 ? 'number' : 'text'"
                    @input="$forceUpdate()"
                    @mousewheel.native.prevent
                    @keyup.enter.native="searchTable()"
                  >
                    <template #prefix>
                      <div class="prefix_icon prefix_icon_search" @click="toggleFlag(item)">
                        <div class="prefix_icon_bg" />
                        <div>切换</div>
                        <div>选择</div>
                      </div>
                    </template>
                  </el-input>

                  <Select-Url
                    v-else
                    ref="selectUrl"
                    :class="{'myEllipsis': item.ellipsis === 1}"
                    :select-value="formTable.searchObj[item.dataIndex]"
                    :item="item"
                    :clearable="true"
                    :placeholder="item.promptText || '请选择'"
                    style="width: 100%"
                    :data-dataIndex="item.dataIndex"
                    @change="obj => selectSearchChange(obj, item)"
                    @changeItemOption="changeItemOption"
                    @toggleChangeComponent="toggleFlag"
                  >
                    <template #prefix>
                      <div class="prefix_icon prefix_icon_search" @click="toggleFlag(item)">
                        <div class="prefix_icon_bg prefix_icon_search" />
                        <div>切换</div>
                        <div>输入</div>
                      </div>
                    </template>
                  </Select-Url>
                </transition>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <div
                v-if="formTable.moreSearchList && formTable.moreSearchList.length"
                class="tableComponent-search-first-font"
                @click="showMoreSearch = !showMoreSearch"
              >
                <span>更多筛选</span>
                <i v-if="!showMoreSearch" class="el-icon-arrow-down" />
                <i v-else class="el-icon-arrow-up" />
              </div>
            </el-col>

          </el-row>

        </el-form>
        <el-button
          class="tableComponent-search-first-btn"
          @click="searchTable"
        >查&nbsp;&nbsp;询</el-button>
      </div>
      <div v-if="showMoreSearch" class="tableComponent-search-more">
        <el-form label-width="100px">
          <el-row>
            <el-col
              v-for="item in formTable.moreSearchList"
              :key="item.dataIndex"
              :span="6"
            >
              <el-form-item
                :label="item.title"
                :title="item.title"
              >
                <el-input
                  v-if="['input', 'text'].includes(item.componentType)"
                  v-model="formTable.searchObj[item.dataIndex]"
                  :placeholder="item.promptText || '请输入' + item.title"
                  clearable
                  @input="$forceUpdate()"
                  @keyup.enter.native="searchTable()"
                />
                <time-picker
                  v-else-if="dataPicker(item)"
                  v-model="formTable.searchObj[item.dataIndex]"
                  :placeholder="item.promptText || '请选择'"
                  :type="dataPicker(item).type"
                  :value-format="dataPicker(item).format"
                  :personal-style="{
                    currentBorderRadius: '6px'
                  }"
                  @blur="$forceUpdate()"
                  @change="$forceUpdate()"
                />
                <Select-Url
                  v-else-if="
                    ['select', 'enterpriseIn', 'enterpriseList'].includes(
                      item.componentType
                    )
                  "
                  ref="selectUrl"
                  :placeholder="item.promptText || '请选择'"
                  :clearable="true"
                  :select-value="formTable.searchObj[item.dataIndex]"
                  :item="
                    formTable.headers.find(obj => obj.dataIndex === item.dataIndex)
                  "
                  style="width: 100%;"
                  :data-dataIndex="item.dataIndex"
                  @change="obj => selectSearchChange(obj, item)"
                  @changeItemOption="changeItemOption"
                />
                <select-url-m
                  v-else-if="item.componentType === 'batchSelect'"
                  :select-value="formTable.searchObj[item.dataIndex]"
                  :placeholder="item.promptText || '请选择'"
                  :item="item"
                  style="width: 100%;"
                  :data-dataIndex="item.dataIndex"
                  @change="obj => selectSearchChange(obj, item)"
                />
                <el-radio-group
                  v-else-if="['radio'].includes(item.componentType)"
                  v-model="formTable.searchObj[item.dataIndex]"
                  @change="$forceUpdate()"
                >
                  <el-radio
                    v-for="radio in item.columnSelectOptions"
                    :key="radio[item.selectViewOptions.renderMapKey]"
                    :label="radio[item.selectViewOptions.renderKey]"
                  >{{ radio[item.selectViewOptions.renderValue] }}
                  </el-radio>
                  <!-- <el-radio
                v-for="radio in item.columnSelectOptions"
                :key="radio[item.selectViewOptions.renderMapKey]"
                :label="radio[item.selectViewOptions.renderValue]"
              >{{ radio[item.selectViewOptions.renderValue] }}
              </el-radio> -->
                </el-radio-group>
                <SelectTree
                  v-else-if="
                    ['treeSelect', 'treeSelectBot', 'enterpriseListTree', 'enterpriseInTree'].includes(
                      item.componentType
                    )
                  "
                  :select-value="formTable.searchObj[item.dataIndex]"
                  :placeholder="item.promptText || '请选择'"
                  :clearable="true"
                  :item="item"
                  @clear="treeSelectSearchClear"
                  @changeData="data => treeSelectSearchChange(data, item)"
                />
                <select-tree-m
                  v-else-if="item.componentType === 'batchTreeSelect'"
                  :select-value="formTable.searchObj[item.dataIndex]"
                  :placeholder="item.promptText || '请选择'"
                  :item="item"
                  @selChange="arr => selChange(arr, item)"
                  @changeData="data => treeSelectSearchChange(data, item)"
                />
                <!-- 输入&下拉 -->
                <transition
                  v-else-if="item.componentType === 'toggleInputSelect'"
                  mode="out-in"
                  name="toggleIS"
                >
                  {{ item.myToggleFlag }}
                  <el-input
                    v-if="item.myToggleFlag"
                    ref="innerOper"
                    v-model="formTable.searchObj[item.dataIndex]"
                    :placeholder="item.promptText || '请输入'"
                    :class="{'myEllipsis': item.ellipsis === 1}"
                    style="width: 100%;height: 100%;"
                    clearable
                    :title="formTable.searchObj[item.dataIndex]"
                    :type="item.isNumber === 1 ? 'number' : 'text'"
                    @mousewheel.native.prevent
                    @input="$forceUpdate()"
                    @keyup.enter.native="searchTable()"
                  >
                    <template #prefix>
                      <div class="prefix_icon prefix_icon_search" @click="toggleFlag(item)">
                        <div class="prefix_icon_bg" />
                        <div>切换</div>
                        <div>选择</div>
                      </div>
                    </template>
                  </el-input>

                  <Select-Url
                    v-else
                    ref="selectUrl"
                    :class="{'myEllipsis': item.ellipsis === 1}"
                    :select-value="formTable.searchObj[item.dataIndex]"
                    :item="item"
                    :clearable="true"
                    :placeholder="item.promptText || '请选择'"
                    style="width: 100%"
                    :data-dataIndex="item.dataIndex"
                    @change="obj => selectSearchChange(obj, item)"
                    @changeItemOption="changeItemOption"
                    @toggleChangeComponent="toggleFlag"
                  >
                    <template #prefix>
                      <div class="prefix_icon prefix_icon_search" @click="toggleFlag(item)">
                        <div class="prefix_icon_bg prefix_icon_search" />
                        <div>切换</div>
                        <div>输入</div>
                      </div>
                    </template>
                  </Select-Url>
                </transition>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
    </div>
    <div
      v-if="[9, 11, 21, 22].includes(tableType)"
      ref="tableUploadRef"
      class="table-upload"
    >
      <el-upload
        v-if="![21, 22].includes(tableType)"
        :before-upload="beforeUpload"
        multiple
        :show-file-list="false"
        action="#"
      >
        <el-button type="primary">
          上传文件
        </el-button>
      </el-upload>
      <!-- <el-upload
        v-else
        :before-upload="vicUpload"
        multiple
        :show-file-list="false"
        action="#"
      > -->
      <el-button v-else type="primary" @click="vicUpload">
        发票上传
      </el-button>
      <!-- </el-upload> -->
    </div>
    <div class="table_vxe" :style="{ height: tableHeight }">
      <vxe-table
        ref="xTable"
        :height="tableHeight"
        row-id="id"
        border
        resizable
        :show-footer="formTable && formTable.sumKey"
        :data="formTable && formTable.bodys"
        :footer-method="footerMethod"
        :header-cell-style="formTable.tableHeaderStyle"
        :filter-config="{ iconNone: 'vxe-icon--search' }"
        :sort-config="{ remote: true }"
        :tree-config="{
          children: 'children',
          iconOpen: 'iconfont icon-xiajiantou',
          iconClose: 'iconfont icon-youjiantou'
        }"
        :radio-config="{
          trigger: 'row',
          highlight:
            formTable.styleHead && formTable.styleHead.lineSelect === 1
              ? true
              : false
        }"
        :checkbox-config="{
          trigger: 'row',
          highlight:
            formTable.styleHead && formTable.styleHead.lineSelect === 2
              ? true
              : false
        }"
        @cell-dblclick="cellDblclick"
        @sort-change="customSortMethod"
        @radio-change="radioChangeEvent"
        @checkbox-all="checkboxChangeEvent"
        @checkbox-change="checkboxChangeEvent"
      >
        <template
          v-if="
            (formTable.styleHead &&
              formTable.styleHead.lineSelect === 1 &&
              isShow) ||
              [21, 22].includes(tableType)
          "
        >
          <vxe-table-column
            :key="formTable.tableId"
            align="center"
            field="radio"
            type="radio"
            width="50"
            fixed="left"
          />
        </template>
        <template
          v-else-if="
            formTable.styleHead &&
              formTable.styleHead.lineSelect === 2 &&
              isShow
          "
        >
          <vxe-table-column
            :key="formTable.tableId"
            align="center"
            field="checkbox"
            type="checkbox"
            width="50"
            fixed="left"
          />
        </template>
        <template v-if="reportOperationTableType.includes(tableType)">
          <vxe-table-column
            :key="tableType"
            field="operation"
            align="center"
            :width="operationWidth"
            fixed="left"
            title="操作"
          >
            <template #default="{ row }">
              <a
                v-for="(item, index) in operationList"
                :key="index"
                :style="item.style"
                @click="operationClick(row, index)"
              >{{ item.name }}</a>
            </template>
          </vxe-table-column>
        </template>
        <template v-for="item in formTable.headers">
          <table-column
            v-if="item.children && item.children.length > 0"
            :key="item.id + ''"
            :coloumn-header="item"
            show-overflow-tooltip
          />
          <template v-else-if="item.systemVariablesName === 'TableRN'">
            <vxe-table-column
              :key="item.id"
              type="seq"
              :width="item.width || 60"
              :title="item.title"
              :field="item.dataIndex"
              :show-overflow="item.ellipsis ? 'ellipsis' : 'tooltip'"
              :align="item.align || 'center'"
              :tree-node="Number(item.isSpread) === 1"
            />
          </template>
          <template v-else>
            <vxe-table-column
              :key="item.id"
              :field="item.dataIndex"
              :title="item.title"
              :show-overflow="item.ellipsis ? 'ellipsis' : 'tooltip'"
              :min-width="item.width || 200"
              :header-align="item.align || 'center'"
              :align="item.align || 'center'"
              :fixed="item.fixed === ' ' ? '' : item.fixed"
              :filters="
                item.showSearch === 1 || item.showSearch === 3
                  ? [{ data: null }]
                  : undefined
              "
              :filter-render="{ name: 'FilterTable' }"
              :footer-class-name="
                Number(item.sumKey) === 1 && !Number(item.isUpper)
                  ? 'sumKey'
                  : ''
              "
              :header-class-name="
                Number(item.isUpper) === 1 && Number(item.sumKey) === 1
                  ? item.upperField
                  : ''
              "
              :tree-node="Number(item.isSpread) === 1"
            >
              <template slot-scope="scope">
                <a v-if="item.componentType==='hyperlinks'" class="urlLink" href="" @click.prevent.stop="urlLinkClick(item,scope.row)">{{ scope.row[item.dataIndex] }}</a>
                <div
                  v-else-if="
                    item.componentType === 'text' ||
                      flag === 1 ||
                      !tableType ||
                      reportOperationTableType.includes(tableType)
                  "
                >
                  <!-- {{ scope.row[item.dataIndex] }} -->
                  {{ reportDataFilter(item, scope.row) }}
                </div>
                <el-input
                  v-else-if="item.componentType === 'input'"
                  v-model="scope.row[item.dataIndex]"
                  :placeholder="item.promptText || '请输入' + item.title"
                  :type="item.isNumber ? 'Number' : 'text'"
                  :readonly="!Number(item.edit)"
                  @mousewheel.native.prevent
                  @change="value => inputChange(item, value, scope.rowIndex)"
                />
                <!-- 时间选择器 -->
                <time-picker
                  v-else-if="dataPicker(item)"
                  v-model="scope.row[item.dataIndex]"
                  :type="dataPicker(item).type"
                  :disabled="item.edit === 0"
                  :value-format="dataPicker(item).format"
                  :placeholder="item.promptText || '请选择'"
                  :personal-style="{
                    currentBorderRadius: '6px'
                  }"
                  @blur="
                    () =>
                      getUrlRequire(
                        item,
                        scope.row[item.dataIndex],
                        scope.rowIndex
                      )
                  "
                />
                <!-- 下拉框 -->
                <Select-Url
                  v-else-if="
                    ['select', 'enterpriseIn', 'enterpriseList'].includes(
                      item.componentType
                    )
                  "
                  ref="selectUrl"
                  :select-value="scope.row[item.dataIndex]"
                  :placeholder="item.promptText || '请选择'"
                  :item="item"
                  :params="
                    formTable.otherUrlRequire.length &&
                      formTable.otherUrlParams[scope.rowIndex] &&
                      formTable.otherUrlParams[scope.rowIndex][item.dataIndex]
                      ? formTable.otherUrlParams[scope.rowIndex][item.dataIndex]
                      : {}
                  "
                  :disabled="!Number(item.edit)"
                  style="width: 100%;"
                  :data-dataIndex="item.dataIndex"
                  @change="v => selectChangeData(v, scope, item)"
                  @changeItemOption="changeItemOption"
                />
                <SelectTree
                  v-else-if="
                    [
                      'treeSelect',
                      'treeSelectBot',
                      'enterpriseListTree',
                      'enterpriseInTree'
                    ].includes(item.componentType)
                  "
                  :placeholder="item.promptText || '请选择'"
                  :select-value="scope.row[item.dataIndex]"
                  :item="item"
                  :disabled="!Number(item.edit)"
                  @changeData="data => treeSelectChangeData(data, scope, item)"
                />
                <!-- 输入&下拉 -->
                <transition
                  v-else-if="item.componentType === 'toggleInputSelect'"
                  mode="out-in"
                  name="toggleIS"
                >
                  {{ item.myToggleFlag }}
                  <el-input
                    v-if="item.myToggleFlag"
                    ref="innerOper"
                    v-model="scope.row[item.dataIndex]"
                    :placeholder="item.promptText || '请输入'"
                    :class="{'myEllipsis': item.ellipsis === 1}"
                    :disabled="item.edit === 0"
                    style="width: 100%;height: 100%;"
                    :data-dataIndex="item.dataIndex"
                    :title="scope.row[item.dataIndex]"
                    :type="item.isNumber === 1 ? 'number' : 'text'"
                    @change="v => inputChange(item, v, scope.rowIndex)"
                  >
                    <template #prefix>
                      <div class="prefix_icon" @click="toggleFlag(item)">
                        <div class="prefix_icon_bg" />
                        <div>切换</div>
                        <div>选择</div>
                      </div>
                    </template>
                  </el-input>

                  <Select-Url
                    v-else
                    ref="selectUrl"
                    :title="scope.row[item.dataIndex]"
                    :class="{'myEllipsis': item.ellipsis === 1}"
                    :placeholder="item.promptText || '请选择'"
                    :item="item"
                    :disabled="item.edit === 0"
                    style="width: 100%;height: 100%;"
                    :data-dataIndex="item.dataIndex"
                    :select-value="scope.row[item.dataIndex]"
                    @change="v => selectChangeData(v, scope, item)"
                    @changeItemOption="changeItemOption"
                    @toggleChangeComponent="toggleFlag"
                  >
                    <template #prefix>
                      <div class="prefix_icon" @click="toggleFlag(item)">
                        <div class="prefix_icon_bg" />
                        <div>切换</div>
                        <div>输入</div>
                      </div>
                    </template>
                  </Select-Url>
                </transition>
                <div v-else>{{ scope.row[item.dataIndex] }}</div>
              </template>
            </vxe-table-column>
          </template>
        </template>
        <vxe-table-column
          v-if="[3, 4, 5, 6, 13, 21, 22].includes(tableType)"
          :key="tableType"
          title="操作"
          min-width="160"
          align="center"
          fixed="left"
          field="do"
        >
          <template #default="{ row,  rowIndex}">
            <span
              v-if="[3, 4, 13, 21, 22].includes(tableType)"
              class="padding-LR-8 add"
              @click="addBodys(row, rowIndex)"
            >复制</span>
            <span
              v-if="[6, 13].includes(tableType)"
              class="padding-LR-8 add"
              @click="rowFileView(row)"
            >预览</span>
            <span
              v-if="[21, 22].includes(tableType) && row.annexId"
              class="padding-LR-8 add"
              @click="rowFileoVio(row)"
            >预览</span>
            <span
              v-if="[4, 5, 13, 21, 22].includes(tableType)"
              class="padding-LR-8 delete"
              @click.stop="delBodys(row, rowIndex)"
            >删除</span>
          </template>
        </vxe-table-column>
        <vxe-table-column
          v-else-if="fileUploadForm.includes(tableType)"
          :key="tableType"
          title="操作"
          min-width="180"
          align="center"
          fixed="right"
          field="do"
        >
          <template #default="{ row, rowIndex }">
            <span
              v-if="!row.file"
              class="padding-LR-8 add"
              @click="fileAction(row, 'view')"
            >预览</span>
            <span
              v-if="!row.file"
              class="padding-LR-8 add"
              @click="fileAction(row, 'down')"
            >下载</span>
            <span
              v-if="tableType === 9"
              class="padding-LR-8 delete"
              @click="delFile(row, rowIndex)"
            >删除</span>
          </template>
        </vxe-table-column>
        <!-- 暂无数据 -->
        <template v-if="!isVerticalForm" #empty>
          <span style="color:#999999;">
            <!-- <img src="@/assets/images/mouthReport/nodata.png"> -->
            <img src="../../assets/images/monthReport/nodata.png">
            <p>暂无数据</p>
          </span>
        </template>
      </vxe-table>
    </div>
    <!-- <div :class="editorBtnflag?'editor_box editorTwo':'editor_box'">
      <div id="editor" />
      <div v-if="editorBtnflag" class="editorBtn">
        <el-button
          size="small"
          @click="editorHandle"
        >取消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="editorHandle"
        >确认</el-button>
      </div>

    </div> -->
    <el-dialog
      title="预览"
      :visible.sync="editorBtnflag"
      append-to-body
      :fullscreen="true"
      :before-close="editorHandle"
    >
      <div id="ylEditor" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="editorHandle">取 消</el-button>
        <el-button type="primary" @click="editorHandle">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 发票管理 -->
    <el-dialog
      title="发票管理"
      :visible.sync="FPDialogVisible"
      append-to-body
      width="800px"
    >
      <div class="FPText">发票已经过OCR校验</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="FPDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="FPDialogSure"
          >确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import FilterTable from './components/FilterTable.vue';
import VXETable from 'vxe-table';
import tableColumn from './components/TableColumn.vue';
import TimePicker from '@/components/CommonForm/components/TimePicker';
import SelectUrl from '@/components/CommonForm/components/SelectUrl';
import { getCommonData } from '@/api/reportCenter';
import { dealRequestData } from '@/components/CommonForm/common';
import SelectUrlM from '@/components/CommonForm/components/SelectUrlM';
import SelectTree from '@/components/CommonForm/components/SelectTree';
import SelectTreeM from '@/components/CommonForm/components/SelectTreeM';
import { getFilePage, fileView, windowDownFile } from '@/api/file';
import { removeFile, downFileNew } from '@/api/filePage/index';
import { getNotice, downLoadNotice } from '@/api/commonPropertypage/index';
import { getLocalStorage, getCurrentTime } from '@/utils/commonMethods';
import { digitUppercase, getSystemVariable, fileReject } from '@/utils/utils';
import bus from '@/utils/eventBus1.js';
import XEUtils from 'xe-utils';
import _ from 'lodash';
import emitter, { SELECTLINK_CROSS } from '@/utils/eventBus.js';
import { findInvoiceInfo } from '@/api/quotaInvoice/index';
import E from 'wangeditor';

import {
  findByInvoice,
  getVatInvoice,
  getQuotaInvoice,
  deleteInvoiceInfo
} from '@/api/quotaInvoice/index';
export default {
  name: 'TableComponent',
  inject: {
    form: {
      from: 'form',
      default: ''
    },
    isShow: {
      from: 'isShow',
      default: true
    }
  },
  // inject: ['form', 'isShow'],
  components: {
    SelectUrl,
    SelectUrlM,
    SelectTree,
    SelectTreeM,
    tableColumn,
    // eslint-disable-next-line vue/no-unused-components
    FilterTable,
    TimePicker
  },
  props: {
    tableId: {
      type: Number,
      default: undefined
    },
    tableType: {
      type: Number,
      default: 0
    },
    isSearch: {
      type: Boolean,
      default: true
    },
    activeTab: {
      type: String,
      default: '0'
    },
    // 是否为竖向表单(竖向表单样式不一样)
    isVerticalForm: {
      type: Boolean,
      default: false
    }
  },
  provide() {
    return {
      formTable: () => this.formTable,
      updateFooter: () => this.updateFooter(),
      forceUpdate: () => this.$forceUpdate()
    };
  },
  data() {
    return {
      formTable: {
        isUpperList: [],
        upperFieldList: [],
        sumKey: false,
        radioSelectRow: {},
        searchList: [],
        moreSearchList: [],
        searchObj: {},
        // 特殊的请求(有other)
        otherUrlRequire: [],
        // 特殊的请求需要的dataIndex(提供者)
        otherUrlDataindex: [],
        otherUrlParams: [],
        // 是否存在跨表求和字段,有就往里加求和的item
        isTotalCross: []
      },
      showMoreSearch: false,
      property: '',
      order: '',
      tableHeight: '',
      editorBtnflag: false,
      editor: null,
      operationWidth: '0',
      operationList: [],
      // 报表类型(有操作的) 24发票预览,14查看/预览, 15公告预览/下载,17抽查预览/下载,18下载,20编辑 25表报预览下载
      reportOperationTableType: [14, 15, 17, 18, 20, 24, 25],
      // 文件类型  9下载/预览/删除/上传,11下载/预览/上传,21增值税发票上传,22固定额发票上传
      // reportType:
      // 表格(附件上传)
      fileUploadForm: [8, 9, 11],
      SFTDXYM: false,
      voiceData: {},
      // 发票
      FPDialogVisible: false,
      rowTable: {}
      // 表格滚动条是否存在(高度为14px)
      // tableSrollHeight: 0
    };
  },
  computed: {
    flag() {
      const { flag } = this.$route.query;
      return Number(flag);
    },
    formGuid() {
      const { formGuid } = this.$route.query;
      return !!formGuid;
    },
    searchObj() {
      return this.formTable.searchObj;
    },
    reportDataFilter() {
      return (item, row) => {
        const { selectViewOptions, columnSelectOptions, dataIndex } = item;
        const options = columnSelectOptions && columnSelectOptions.length && columnSelectOptions;
        const select = selectViewOptions && Object.keys(selectViewOptions).length && selectViewOptions;
        const value = row[dataIndex];
        if (options && select && value !== '') {
          const { renderKey, renderValue } = select;
          const findObj = options.find(item => item[renderKey] === value);
          const findValue = findObj && findObj[renderValue] || value;
          return findValue;
        } else {
          return value;
        }
      };
    }
  },
  watch: {
    tableId: {
      deep: true,
      handler: function(value) {
        this.form()[value] &&
          this.form()[value].bodys &&
          (this.formTable = this.form()[value]);
        this.getvoiceData();
      }
    },
    activeTab: {
      deep: true,
      handler: function() {
        this.getTableHeight();
      }
    },
    'formTable.searchList': {
      deep: true,
      handler: function() {
        this.getTableHeight();
      }
    },
    'formTable.bodys': {
      deep: true,
      handler: function(arr) {
        if (this.formTable.styleHead.isAutoWidth && arr.length) {
          this.adaptiveWidth(arr);
        }
        // const box = document.getElementsByClassName('vxe-table--header');
        if (this.isVerticalForm) {
          // 表头高度
          const headHight = this.formTable.styleHead.lineHeight;
          this.tableHeight = headHight + (arr.length * 40 || 40) + 14 + 'px';
        }
      }
    },
    tableType: {
      deep: true,
      immediate: true,
      handler: function(tableType) {
        if (this.reportOperationTableType.includes(tableType)) {
          let width;
          let operationList;
          switch (this.tableType) {
            case 14: {
              width = '80';
              operationList = [
                {
                  name: '预览',
                  style: {
                    color: '#1492FF'
                  }
                }
              ];
              break;
            }
            case 15: {
              width = '120';
              operationList = [
                {
                  name: '预览',
                  style: {
                    color: '#1492FF'
                  }
                },
                {
                  name: '下载',
                  style: {
                    color: '#1492FF',
                    paddingLeft: '10px'
                  }
                }
              ];
              break;
            }
            case 17: {
              width = '120';
              operationList = [
                {
                  name: '预览',
                  style: {
                    color: '#1492FF'
                  }
                },
                {
                  name: '下载',
                  style: {
                    color: '#1492FF',
                    paddingLeft: '10px'
                  }
                }
              ];
              break;
            }
            case 18: {
              width = '80';
              operationList = [
                {
                  name: '下载',
                  style: {
                    color: '#1492FF'
                  }
                }
              ];
              break;
            }
            case 20: {
              width = '80';
              operationList = [
                {
                  name: '编辑',
                  style: {
                    color: '#1492FF'
                  }
                }
              ];
              break;
            }
            case 24: {
              width = '80';
              operationList = [
                {
                  name: '预览',
                  style: {
                    color: '#1492FF'
                  }
                }
              ];
              break;
            }
            case 25: {
              width = '120';
              operationList = [
                {
                  name: '预览',
                  style: {
                    color: '#1492FF'
                  }
                },
                {
                  name: '下载',
                  style: {
                    color: '#1492FF',
                    paddingLeft: '10px'
                  }
                }
              ];
              break;
            }
            default:
              break;
          }
          this.operationWidth = width;
          this.operationList = operationList;
        }
      }
    }
  },
  created() {
    VXETable.renderer.add('FilterTable', {
      isFooter: false,
      // 筛选模板
      renderFilter(h, renderOpts, params) {
        return [<FilterTable params={params} />];
      }
    });
  },
  mounted() {
    emitter.on(SELECTLINK_CROSS, arr => {
      arr.forEach(item => {
        if (Number(item.tableId) === this.tableId) {
          // 如何key为BTZD,说明是必填字段
          if (item.key === 'BTZD') {
            const currentValue = this.formTable.tabInfo.mustFillInConfig && this.formTable.tabInfo.mustFillInConfig.currentValue;
            let currentValueArr = [];
            currentValue && (currentValueArr = currentValue.split(','));
            if (currentValueArr.includes(item.value)) {
              this.formTable.BTZD = true;
            } else {
              this.formTable.BTZD = false;
            }
            return;
          }
          // 页签字段有focusUrl掉接口
          const tabInfo = this.formTable.tabInfo;
          // 如果页签有focusUrl配置,说明改列表数据为掉接口
          if (tabInfo.focusUrl) {
            // 清空所有数据
            this.formTable.bodys = [];
            this.formTable.otherUrlParams = [];
            // this.formTable.bodys[0] = {
            //   id: new Date().valueOf()
            // };
            this.formTable.bodys = [];
            // const keyArr = Object.keys(tabInfo.focusUrlParams.other);
            let endREquestPayload;
            // 目前只做一个other参数
            // if (keyArr.length === 1) {
            //   const otherKey = {
            //     userId: {
            //       key: tabInfo.focusUrlParams.other[keyArr[0]].key,
            //       value: item.value
            //     }
            //   };
            //   endREquestPayload = dealRequestData(
            //     tabInfo.focusUrlParams,
            //     otherKey
            //   );
            // } else {
            tabInfo.focusUrlParams.other[item.key] && (tabInfo.focusUrlParams.other[item.key].value = item.value);
            // 判断othe中所有参数是否有值,全有才触发接口
            let allOther = true;
            for (const i in tabInfo.focusUrlParams.other) {
              if (!tabInfo.focusUrlParams.other[i].value) {
                allOther = false;
              }
            }
            if (allOther) {
              endREquestPayload = dealRequestData(
                tabInfo.focusUrlParams,
                tabInfo.focusUrlParams.other
              );
            } else {
              return;
            }
            // }

            getCommonData(endREquestPayload, tabInfo.focusUrl).then(
              ({ data }) => {
                const { success, message } = data;
                if (success && data.data && data.data.length) {
                  data.data.forEach((v, i) => {
                    const obj = {};
                    tabInfo.linkageFields.forEach(link => {
                      obj[link.key] = v[link.value];
                    });
                    this.formTable.bodys.push({
                      id: new Date().valueOf() + Math.round(Math.random() * 1000),
                      ...obj
                    });
                  });
                  this.formTable.otherUrlParams.length = data.data.length;
                } else {
                  this.formTable.bodys.push({
                    id: new Date().valueOf()
                  });
                  this.$message.error(message);
                }
              }
            );
          } else {
            // 清空数据
            this.formTable.bodys.splice(1);
            this.formTable.otherUrlParams.splice(1);
            const findObj = this.formTable.headers.find(
              f => f.dataIndex === item.key
            );
            if (
              findObj &&
              findObj.focusUrlParams &&
              JSON.stringify(findObj.focusUrlParams) !== '{}' &&
              findObj.focusUrlParams.other
            ) {
              this.getUrlRequire(item.form, item.value, 0);
              const otherKey = this.formTable.otherUrlParams[0][item.key];
              const otherArr = Object.keys(otherKey);
              let otheAllParams = true;
              otherArr.length &&
                otherArr.forEach(oitem => {
                  !otherKey[oitem].value && (otheAllParams = false);
                });
              if (
                otheAllParams &&
                findObj &&
                findObj.componentType !== 'select'
              ) {
                const endREquestPayload = dealRequestData(
                  findObj.focusUrlParams,
                  otherKey
                );
                getCommonData(endREquestPayload, findObj.focusUrl).then(
                  ({ data }) => {
                    const { success, message } = data;
                    if (success) {
                      this.formTable.bodys.forEach(v => {
                        v[item.key] = data.data.result;
                      });
                    } else {
                      this.formTable.bodys.forEach(v => {
                        v[item.key] = '';
                      });
                      this.$message.error(message);
                    }
                  }
                );
              }
            } else {
              this.formTable.bodys.forEach(v => {
                v[item.key] = item.value;
              });
            }
          }
        }
      });
    });
  },
  beforeDestroy() {
    emitter.off(SELECTLINK_CROSS);
    if (this.editor) {
      this.editor.destroy();
      this.editor = null;
    }
  },
  methods: {
    cellDblclick({ row }) {
      if (this.SFTDXYM) {
        this.$emit('cellDblclick', { ...row, SFTDXYM: true });
      } else {
        this.$emit('cellDblclick', row);
      }
    },
    inputChange(item, value, index) {
      this.formTable.bodys[index][item.dataIndex] = Number(item.isNumber)
        ? Number(value)
        : value;
      // 是否存在金额大写
      const i = this.formTable.upperFieldList.findIndex(
        k => k === item.dataIndex
      );
      if (i !== -1) {
        this.formTable.bodys[index][
          this.formTable.isUpperList[i]
        ] = digitUppercase(this.formTable.bodys[index][item.dataIndex]);
      }
      // 是否为合计
      if (Number(item.sumKey) === 1) {
        this.updateFooter();
      }
      // 传other调用接口
      this.getUrlRequire(item, value, index);
      if (this.formTable.isTotalCross.length) {
        // 该列是否需要合并计算跨表
        const findObj = this.formTable.isTotalCross.find(i => i.dataIndex === item.dataIndex);
        findObj && this.computedTotalCross();
      }
    },
    computedTotalCross() {
      const isTotalCross = this.formTable.isTotalCross;
      for (let i = 0; i < isTotalCross.length; i++) {
        // 计算总和
        let total = 0;
        this.formTable.bodys.forEach(v => {
          if (v[isTotalCross[i].dataIndex]) {
            total += Number(v[isTotalCross[i].dataIndex]);
          }
        });
        isTotalCross[i].linkageFields.forEach(f => {
          if (f.isTotal) {
            // 获取联动的表单
            const otherForm = this.form()[f.tableId];
            otherForm.headers.forEach(head => {
              if (head.dataIndex === f.key) {
                head.myValue = total;
                head.editMark = true;
              }
            });
          }
        });
      }
    },
    updateFooter() {
      this.$refs.xTable.updateFooter();
    },
    async getvoiceData() {
      if ([21, 22].includes(this.tableType)) {
        await findByInvoice({ tableId: this.tableId }).then(resData => {
          if (resData.data.length) {
            this.voiceData = resData.data[0];
          } else {
            this.voiceData = {};
          }
        });
      } else {
        this.voiceData = {};
      }
    },
    async initData() {
      this.getvoiceData();
      this.formTable = this.form()[this.tableId];
      const { formGuid, fileType } = this.$route.query;
      if (this.formGuid) {
        this.formTable.changeBodys = _.cloneDeep(this.formTable.bodys);
      }
      if (
        !this.formTable.bodys.length &&
        ![0].concat(this.fileUploadForm)
          .concat(this.reportOperationTableType)
          .includes(this.tableType) &&
        this.flag !== 1
      ) {
        this.formTable.bodys[0] = {
          id: new Date().valueOf()
        };
      } else if (this.formGuid && this.fileUploadForm.includes(this.tableType)) {
        await getFilePage({
          pageIndex: 0,
          pageSize: 500,
          guid: formGuid,
          type: fileType
        }).then(res => {
          const { success, data } = res;
          if (success) {
            const filterDate = data.filter(
              item => item.description === this.formTable.tableId + ''
            );
            this.formTable.bodys.forEach(item => {
              const findFile = filterDate.find(
                v => v.originName === item.FILENAME
              );
              findFile && (item.id = findFile.id);
              findFile && (item.saveName = item.fileName = findFile.originName);
            });
          }
          this.formTable.changeBodys = _.cloneDeep(this.formTable.bodys);
        });
        this.$forceUpdate();
      } else if (this.formGuid && [21, 22].includes(this.tableType)) {
        findInvoiceInfo({ formGuid: this.$route.query.formGuid }).then(res => {
          res.data.forEach(item => {
            this.formTable.bodys.forEach(it => {
              if (item.invoiceNum === JSON.parse(it.voiceObj).InvoiceNum) {
                it.annexId = item.annexId;
              }
            });
          });
          this.$forceUpdate();
        });
      }
      this.dealHeader();
      // 递归过滤表头(display)
      const filterHeader = arr => {
        return arr
          .filter(item => Number(item.display))
          .map(item => {
            item = Object.assign({}, item);
            if (item.children && item.children.length) {
              item.children = filterHeader(item.children);
            }
            return item;
          });
      };
      this.formTable.headers = filterHeader(this.formTable.headers);
      this.getTableHeadStyle();
      this.getTableHeight();
    },
    // 递归整理数据
    dealHeader() {
      this.formTable.sumKey = false;
      this.formTable.isTotalCross = [];
      this.formTable.isUpperList = [];
      this.formTable.upperFieldList = [];
      this.formTable.searchList = [];
      this.formTable.moreSearchList = [];
      this.formTable.radioSelectRow = {};
      this.formTable.checkbox = [];
      this.formTable.searchObj = {};
      this.formTable.otherUrlRequire = [];
      this.formTable.otherUrlDataindex = [];
      this.formTable.otherUrlParams = [];
      this.formTable.otherUrlParams[0] = {};
      const searchArr = [];
      const array = arr => {
        arr.forEach(item => {
          if (item.children && item.children.length) {
            item.children.sort((a, b) => a.orderId - b.orderId);
            item.id =
              item.id +
              Math.ceil(Math.random() * 10) +
              Math.ceil(Math.random() * 10);
            array(item.children);
          } else {
            if (item.dataIndex === 'SFTDXYM') {
              // this.dbclick = true;
              this.SFTDXYM = true;
            }
            if (
              item.focusUrlParams &&
              item.focusUrlParams.other &&
              JSON.stringify(item.focusUrlParams.other) !== '{}'
            ) {
              const arr = Object.keys(item.focusUrlParams.other);
              this.formTable.otherUrlDataindex = this.formTable.otherUrlDataindex.concat(
                arr
              );
              this.formTable.otherUrlRequire.push(item);
              this.formTable.otherUrlParams[0][item.dataIndex] = _.cloneDeep(
                item.focusUrlParams.other
              );
            }
            item.id =
              item.id +
              Math.ceil(Math.random() * 10) +
              Math.ceil(Math.random() * 10);
            // item.componentType = 'dayDateSelect';
            // showSearch0不搜索1:表头搜索 2:按钮搜索 3:按钮+表头
            if (item.showSearch) {
              if (item.showSearch === 2 || item.showSearch === 3) {
                searchArr.push(item);
              }
              if (
                ['batchSelect', 'batchTreeSelect'].includes(item.componentType)
              ) {
                this.formTable.searchObj[item.dataIndex] = [];
              } else {
                this.formTable.searchObj[item.dataIndex] = '';
              }
            }
            const file = [0].concat(this.fileUploadForm).concat(this.reportOperationTableType);
            if (
              [
                'select',
                'treeSelect',
                'batchSelect',
                'batchTreeSelect',
                'treeSelectBot',
                'enterpriseListTree',
                'enterpriseInTree'
              ].includes(item.componentType)
            ) {
              if (!item.focusUrl) {
                item.opintion = item.columnSelectOptions || [];
              } else {
                item.opintion = [];
              }
            }
            if (file.includes(this.formTable.tableType)) return;
            // 系统变量
            if (item.systemVariablesName) {
              item.defaultValue = getSystemVariable(item.systemVariablesName);
            }
            // 默认值
            if (Number(item.isNumber) === 1 && !this.formGuid) {
              item.defaultValue
                ? (this.formTable.bodys[0][item.dataIndex] = Number(
                  item.defaultValue
                ))
                : (this.formTable.bodys[0][item.dataIndex] = undefined);
              this.getUrlRequire(item, item.defaultValue, 0);
            } else if (!Number(item.isNumber) && !this.formGuid) {
              item.defaultValue
                ? (this.formTable.bodys[0][item.dataIndex] = item.defaultValue)
                : (this.formTable.bodys[0][item.dataIndex] = '');
              this.getUrlRequire(item, item.defaultValue, 0);
            }
            // 是否大写
            if (Number(item.isUpper) === 1) {
              this.formTable.isUpperList.push(item.dataIndex);
              this.formTable.upperFieldList.push(item.upperField);
            }
            // 是否是跨表联动求和
            if (item.linkageFields && item.linkageFields.length) {
              const findTotalCross = item.linkageFields.find(i => i.isTotal);
              findTotalCross && (this.formTable.isTotalCross.push(item));
            }
            // item.treeSelectItem = {}; // 下拉框存放选中的数据
            JSON.stringify(item.selectViewOptions) === '{}' &&
              (item.selectViewOptions = {
                renderKey: 'lable',
                renderMapKey: 'value',
                renderValue: 'lable'
              });
            if (Number(item.sumKey) === 1) {
              this.formTable.sumKey = true;
            }
          }
        });
      };
      array(this.formTable.headers);
      if (searchArr.length > 3) {
        this.formTable.searchList = searchArr.slice(0, 3);
        this.formTable.moreSearchList = searchArr.slice(3);
      } else {
        this.formTable.searchList = searchArr;
        this.formTable.moreSearchList = [];
      }
    },
    // isAutoWidth
    // 获取表头样式
    getTableHeadStyle() {
      const styleHead = this.formTable.styleHead;
      if (JSON.stringify(styleHead) !== '{}') {
        this.$nextTick(() => {
          this.$refs.tableComponentRef.style.setProperty(
            '--filterColor',
            styleHead.fontColor
          );
        });
        this.formTable.tableHeaderStyle = {
          'background-color': styleHead.headerColor || '#f7f8fa',
          color: styleHead.fontColor || '#333',
          'text-align': 'center',
          height: styleHead.lineHeight ? styleHead.lineHeight + 'px' : '56px',
          'font-size': styleHead.fontSize ? styleHead.fontSize + 'px' : '14px',
          'font-weight': styleHead.isBold === 0 ? '500' : 'bold'
        };
      } else {
        this.formTable.tableHeaderStyle = {
          'background-color': '#f7f8fa',
          color: '#333',
          'text-align': 'center',
          height: '56px',
          'font-size': '14px',
          'font-weight': 'bold'
        };
      }
    },
    // 合计
    footerMethod({ columns, data }) {
      const footerData = [
        columns.map((column, columnIndex) => {
          if (column.property === 'do') {
            return '合计';
          } else {
            if (column.footerClassName === 'sumKey') {
              return XEUtils.sum(data, column.property);
              // return digitUppercase(XEUtils.sum(data, column.property));
            } else if (column.headerClassName) {
              return digitUppercase(XEUtils.sum(data, column.headerClassName));
            } else {
              return '--';
            }
          }
        })
      ];
      return footerData;
    },
    // 自适应宽度
    adaptiveWidth(bodys) {
      const widthObj = {};
      for (const key in bodys[0]) {
        widthObj[key] = 0;
      }
      const widthLength = str => {
        let length = 0;
        Array.from(str).forEach(i => {
          if (i.charCodeAt(0) > 255) {
            // 字符编码大于255，说明是双字节字符
            length += 2;
          } else {
            length++;
          }
        });
        return length;
      };
      // 计算最长宽度
      bodys.forEach(v => {
        for (const key in v) {
          const width = widthLength(v[key]) * 7 + 14;
          if (width > widthObj[key]) {
            widthObj[key] = width;
          }
        }
      });
      const findFun = (data, arr, w) => {
        arr.forEach(i => {
          if (i.children && i.children.length) {
            findFun(data, i.children, w);
          } else {
            if (i.dataIndex === data && i.width < w) {
              i.width = w;
            }
          }
        });
      };
      // 赋值
      for (const key in widthObj) {
        findFun(key, this.formTable.headers, widthObj[key]);
      }
    },
    // 复制
    addBodys(row, rowIndex) {
      if (this.flag === 1) return;
      const id = new Date().valueOf();
      const obj = {
        ...row,
        id
      };
      obj.rowNum && delete obj.rowNum;
      this.formTable.bodys.splice(rowIndex + 1, 0, obj);
      if (this.formTable.otherUrlRequire.length) {
        const otherUrlParams = _.cloneDeep(
          this.formTable.otherUrlParams[rowIndex]
        );
        this.formTable.otherUrlParams.splice(rowIndex + 1, 0, otherUrlParams);
      }
      // 该列表是否有跨表求和
      if (this.formTable.isTotalCross.length) {
        this.computedTotalCross();
      }
    },
    // 删除
    delBodys(row, rowIndex) {
      if (this.flag === 1) return;
      if (this.tableType === 21 || this.tableType === 22) {
        if (row.annexId) {
          deleteInvoiceInfo({ fileId: row.annexId }).then(res => {
            if (res.success) {
              this.$message.success(res.message);
            } else {
              this.$message.warning(res.message);
            }
          });
        }
      }
      if (this.formTable.bodys.length === 1) {
        for (const k in row) {
          // k !== 'id' && k !== 'rowNum' && (row[k] = undefined);
          k !== 'id' && (row[k] = undefined);
          k === 'id' && (row[k] = new Date().valueOf());
        }
        // this.formTable.otherUrlParams = [];
        // 暂时不清空otherUrlParams
        // for (const i in this.formTable.otherUrlParams[0]) {
        //   for (const v in this.formTable.otherUrlParams[0][i]) {
        //     this.formTable.otherUrlParams[0][i][v].value = '';
        //   }
        // }
        this.formTable.otherUrlParams.length = 1;
      } else {
        this.formTable.bodys.splice(rowIndex, 1);
        this.formTable.otherUrlParams.splice(rowIndex, 1);
      }
      if (row.id === this.formTable.radioSelectRow.id && this.formTable.bodys.length !== 1) {
        this.formTable.radioSelectRow = {};
      }
      // 该列表是否有跨表求和
      if (this.formTable.isTotalCross.length) {
        this.computedTotalCross();
      }
    },

    // 时间选择器类型
    dataPicker(item) {
      const { componentType } = item;
      const typesMap = {
        yearDateSelect: {
          format: 'yyyy',
          type: 'year'
        },
        monthDateSelect: {
          format: 'yyyy-MM',
          type: 'month'
        },
        dayDateSelect: {
          format: 'yyyy-MM-dd',
          type: 'date'
        },
        monthDateSelectRange: {
          format: 'yyyy-MM',
          type: 'monthrange'
        },
        dayDateSelectRange: {
          format: 'yyyy-MM-dd',
          type: 'daterange'
        }
      };

      if (componentType in typesMap) {
        return typesMap[componentType];
      } else {
        return false;
      }
    },

    // 树状下拉选择(联动)
    treeSelectChangeData(treeData, scope, item) {
      const { data, node } = treeData;
      const { rowIndex } = scope;
      const { dataIndex, selectViewOptions, linkageFields } = item;
      // const { renderValue } = selectViewOptions;
      const { renderKey } = selectViewOptions;
      // this.formTable.bodys[rowIndex][dataIndex] = data[renderValue];
      this.formTable.bodys[rowIndex][dataIndex] = data[renderKey];
      const nodeArr = [];
      const AddNodeshift = arr => {
        if (arr.parent) {
          nodeArr.unshift(arr.data);
          AddNodeshift(arr.parent);
        }
      };
      AddNodeshift(node);
      linkageFields.length &&
        linkageFields.forEach(itemC => {
          if (!itemC.level) {
            const linkObj = this.formTable.headers.find(
              v => v.dataIndex === itemC.key
            );
            let componentType, focusUrlParams;
            linkObj &&
              (componentType = linkObj.componentType) &&
              (focusUrlParams = linkObj.focusUrlParams);
            if (focusUrlParams && focusUrlParams.other) {
              this.getUrlRequire(item, data[itemC.value], rowIndex);
              return;
            }
            if (componentType === 'select' && linkObj && !linkObj.focusUrl) {
              // 需要先清空原有的数据
              this.formTable.bodys[rowIndex][itemC.key] = '';
              const arrOption = data[itemC.value].split(',');
              const arr = [];
              arrOption.forEach(itemCC => {
                arr.push({
                  lable: itemCC,
                  value: itemCC
                });
              });
              linkObj.opintion = arr;
              // 只有一个选项则默认为该选项
              if (arr.length === 1) {
                this.formTable.bodys[rowIndex][itemC.key] = arrOption[0];
              } else {
                this.formTable.bodys[rowIndex][itemC.key] = '';
              }
            } else {
              this.formTable.bodys[rowIndex][itemC.key] = data[itemC.value];
            }
          } else {
            this.formTable.bodys[rowIndex][itemC.key] =
              nodeArr[itemC.level - 1][itemC.value];
          }
        });
      this.$forceUpdate();
    },

    // 下拉联动,data为选择的option
    selectChangeData(data, scope, item) {
      const { rowIndex } = scope;
      const { dataIndex, selectViewOptions, linkageFields } = item;
      // const { renderValue } = selectViewOptions;
      const { renderKey } = selectViewOptions;
      // this.formTable.bodys[rowIndex][dataIndex] = data[renderValue];
      this.formTable.bodys[rowIndex][dataIndex] = data[renderKey];
      linkageFields.length &&
        linkageFields.forEach(itemC => {
          const linkObj = this.formTable.headers.find(
            v => v.dataIndex === itemC.key
          );
          let componentType, focusUrlParams;
          linkObj &&
            (componentType = linkObj.componentType) &&
            (focusUrlParams = linkObj.focusUrlParams);
          if (focusUrlParams && focusUrlParams.other) {
            this.getUrlRequire(item, data[itemC.value], rowIndex);
            return;
          }
          if (componentType === 'select' && linkObj && !linkObj.focusUrl) {
            // 需要先清空原有的数据
            this.formTable.bodys[rowIndex][itemC.key] = '';
            // headers.
            const arrOption = data[itemC.value].split(',');
            const arr = [];
            arrOption.forEach(itemCC => {
              arr.push({
                lable: itemCC,
                value: itemCC
              });
            });
            linkObj.opintion = arr;
            // 只有一个选项则默认为该选项
            if (arr.length === 1) {
              this.formTable.bodys[rowIndex][itemC.key] = arrOption[0];
            } else {
              this.formTable.bodys[rowIndex][itemC.key] = '';
            }
          } else {
            this.formTable.bodys[rowIndex][itemC.key] = data[itemC.value];
          }
        });
      this.$forceUpdate();
    },

    // 附件上传按钮
    beforeUpload(file) {
      const fileNameList = [];
      this.formTable.bodys.forEach(item => fileNameList.push(item.FILENAME));
      if (fileNameList.includes(file.name)) {
        return this.$message.error(
          '文件上传失败,' + file.name + '文件名已存在'
        );
      }
      if (file.size === 0) {
        this.$message.error('文件内容不能为空');
      } else {
        const strArr = file.name.split('.');
        const fileType = strArr[strArr.length - 1];
        if (fileReject.includes(fileType)) {
          this.$message.warning('不支持上传' + fileType + '类型的文件..');
        } else {
          let RN;
          if (this.formTable.bodys.length) {
            RN = Math.max.apply(
              Math,
              this.formTable.bodys.map(item => {
                return item.RN;
              })
            );
          }
          const fileObj = {
            id: RN ? RN + 1 : 1,
            RN: RN ? RN + 1 : 1,
            FILENAME: file.name,
            FILETYPE: fileType,
            UPLOADER: getLocalStorage('xcNickName'),
            UPLOADDATE: getCurrentTime(),
            file
          };
          const { title } = this.$route.query;
          if (title && title.includes('资金监管')) {
            const {
              ENTERPRISECODE,
              ENTERPRISENAME,
              PROGRAMNAME,
              CENTERPRISECODE1
            } = this.$route.query;
            let fileAddObj = {
              ...fileObj,
              ENTERPRISECODE,
              ENTERPRISENAME,
              PROGRAMNAME,
              // CENTERPRISECODE1,
              YEAR: new Date().getFullYear() + ''
            };
            if (CENTERPRISECODE1) {
              fileAddObj = {
                ...fileObj,
                CPROGRAMNAME: PROGRAMNAME,
                CENTERPRISENAME1: ENTERPRISENAME,
                CENTERPRISECODE1,
                YEAR: new Date().getFullYear() + ''
              };
            }
            this.formTable.bodys.push(fileAddObj);
          } else {
            this.formTable.headers.forEach(head => {
              if (head.systemVariablesName) {
                fileObj[head.dataIndex] = getSystemVariable(head.systemVariablesName);
              }
            });
            this.formTable.bodys.push(fileObj);
          }
        }
      }
      return false;
    },
    async vicUpload() {
      if (!Object.keys(this.voiceData).length) {
        this.$message.warning('未进行发票配置');
        return;
      }
      if (Object.keys(this.formTable.radioSelectRow).length) {
        const radioRow = this.formTable.radioSelectRow;
        const selFileEle = document.createElement('input');
        selFileEle.setAttribute('type', 'file');
        selFileEle.click();
        selFileEle.onchange = async e => {
          const file = e.path[0].files[0];
          if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'application/pdf') {
            this.$message.warning('发票仅允许上传jpg、png或pdf格式');
            return;
          }
          const data = new FormData();
          const strArr = file.name.split('.');
          const fileType = strArr[strArr.length - 1];

          const fileObj = {
            id: new Date().valueOf(),
            FILENAME: file.name,
            FILETYPE: fileType,
            UPLOADER: getLocalStorage('xcNickName'),
            UPLOADDATE: getCurrentTime(),
            file
          };
          data.append('file', file);
          if (file.type === 'application/pdf') {
            data.append('fileType', 'pdf_file');
          } else {
            data.append('fileType', 'image');
          }
          if (this.voiceData.type === '0') {
            await getVatInvoice(data).then(res1 => {
              if (res1.success) {
                if (
                  this.voiceData.isCheck === 1 &&
                  this.voiceData.isAutoFill === 0
                ) {
                  this.voiceData.fieldList.forEach(item1 => {
                    if (
                      radioRow[item1.tableHeaderDataIndex] ===
                      res1.data.words_result[item1.optionMemo]
                    ) {
                      this.formTable.bodys.forEach(it => {
                        if (it.id === radioRow.id) {
                          it.voiceObj = {
                            InvoiceCode: res1.data.words_result.InvoiceCode,
                            InvoiceNum: res1.data.words_result.InvoiceNum
                          };
                          it.type = '0';
                          for (const key in fileObj) {
                            it[key] = fileObj[key];
                          }
                        }
                      });
                    } else {
                      this.$message.warning('需校验的表单字段与发票字段不一致');
                    }
                  });
                }
                if (
                  this.voiceData.isCheck === 0 &&
                  this.voiceData.isAutoFill === 1
                ) {
                  this.voiceData.fieldList.forEach(item2 => {
                    // if(Array.isArray(res1.data.words_result[item2.optionMemo])){
                    //   res1.data.words_result[item2.optionMemo]=JSON.stringify(res1.data.words_result[item2.optionMemo])
                    // }
                    this.formTable.radioSelectRow[item2.tableHeaderDataIndex] = res1.data.words_result[item2.optionMemo];
                    this.formTable.bodys.forEach(it => {
                      if (it.id === radioRow.id) {
                        it.voiceObj = {
                          InvoiceCode: res1.data.words_result.InvoiceCode,
                          InvoiceNum: res1.data.words_result.InvoiceNum
                        };
                        it.type = '0';
                        for (const key in fileObj) {
                          it[key] = fileObj[key];
                        }
                      }
                    });
                  });
                }
              } else {
                this.$message.warning(res1.message);
              }
            });
          } else if (this.voiceData.type === '1') {
            await getQuotaInvoice(data).then(res2 => {
              if (res2.success) {
                if (
                  this.voiceData.isCheck === 1 &&
                this.voiceData.isAutoFill === 0
                ) {
                  this.voiceData.fieldList.forEach(item2 => {
                    if (
                      radioRow[item2.tableHeaderDataIndex] ===
                    res2.data.words_result[item2.optionMemo]
                    ) {
                      this.formTable.bodys.forEach(it => {
                        if (it.id === radioRow.id) {
                          it.voiceObj = {
                            InvoiceCode: res2.data.words_result.invoice_code,
                            InvoiceNum: res2.data.words_result.invoice_number
                          };
                          it.type = '1';
                          for (const key in fileObj) {
                            it[key] = fileObj[key];
                          }
                        }
                      });
                    } else {
                      this.$message.warning('需校验的表单字段与发票字段不一致');
                    }
                  });
                }
                if (
                  this.voiceData.isCheck === 0 &&
                this.voiceData.isAutoFill === 1
                ) {
                  this.voiceData.fieldList.forEach(item2 => {
                    this.formTable.radioSelectRow[item2.tableHeaderDataIndex] =
                    res2.data.words_result[item2.optionMemo];
                    this.formTable.bodys.forEach(it => {
                      if (it.id === radioRow.id) {
                        it.voiceObj = {
                          InvoiceCode: res2.data.words_result.invoice_code,
                          InvoiceNum: res2.data.words_result.invoice_number
                        };
                        it.type = '1';
                        for (const key in fileObj) {
                          it[key] = fileObj[key];
                        }
                      }
                    });
                  });
                }
              } else {
                this.$message.warning(res2.message);
              }
            });
          }
        };
      } else {
        this.$message.warning('请勾选相应数据后进行上传发票');
      }
    },
    // 附件删除123
    delFile(row, rowIndex) {
      if (this.flag === 1) return;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (row.file) {
            this.formTable.bodys.splice(rowIndex, 1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            removeFile({
              id: row.id
            }).then(res => {
              if (res.success) {
                this.$message.success('删除文件成功');
                this.formTable.bodys.splice(rowIndex, 1);
              } else {
                this.$message.warning('删除文件失败');
              }
            });
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 文件预览下载
    fileAction(file, type) {
      const fileDown1 = async row => {
        windowDownFile(file);
      };
      const fileView1 = row => {
        fileView(file.id);
      };
      const eventMap = {
        down: fileDown1,
        view: fileView1
      };
      eventMap[type](file);
    },

    // 列单选
    radioChangeEvent({ row }) {
      this.formTable.radioSelectRow = row;
    },

    // 列多选
    checkboxChangeEvent({ records }) {
      bus.$emit('checkboxChangeEvent', records);
      this.formTable.checkbox = records;
    },

    // 筛选区下拉框change
    selectSearchChange(obj, item) {
      if (['select', 'toggleInputSelect'].includes(item.componentType)) {
        const {
          dataIndex,
          selectViewOptions: { renderKey }
        } = item;
        this.formTable.searchObj[dataIndex] = obj[renderKey];
        // const {
        //   dataIndex,
        //   selectViewOptions: { renderValue }
        // } = item;
        // this.formTable.searchObj[dataIndex] = obj[renderValue];
      } else if (['batchSelect'].includes(item.componentType)) {
        // 下拉多选
        const { dataIndex } = item;
        this.formTable.searchObj[dataIndex] = obj;
      }
      this.$forceUpdate();
    },

    // 筛选区树状下拉框change
    treeSelectSearchChange(treeData, item) {
      // const {
      //   dataIndex,
      //   selectViewOptions: { renderValue }
      // } = item;
      const {
        dataIndex,
        selectViewOptions: { renderKey }
      } = item;
      if (
        ['treeSelect', 'treeSelectBot', 'enterpriseListTree', 'enterpriseInTree'].includes(
          item.componentType
        )
      ) {
        const { data } = treeData;
        // const {
        //   dataIndex,
        //   selectViewOptions: { renderKey }
        // } = item;
        this.formTable.searchObj[dataIndex] = data[renderKey];
        // 显示什么绑定什么,等提交再转换
        // this.formTable.searchObj[dataIndex] = data[renderValue];
        this.$forceUpdate();
      } else if (['batchTreeSelect'].includes(item.componentType)) {
        // 树状多选
        const { data } = treeData;
        // this.formTable.searchObj[dataIndex] = this.formTable.searchObj[dataIndex].concat(data[renderValue]);
        this.formTable.searchObj[dataIndex] = this.formTable.searchObj[dataIndex].concat(data[renderKey]);
        this.$forceUpdate();
      }
    },
    // 筛选区树状下拉框clear
    treeSelectSearchClear({ item }) {
      const { dataIndex } = item;
      this.formTable.searchObj[dataIndex] = '';
      this.$forceUpdate();
    },
    // 树状多选点叉号
    selChange(arr, item) {
      const { dataIndex } = item;
      this.formTable.searchObj[dataIndex] = arr;
      this.$forceUpdate();
    },
    // 搜索按钮点击
    searchTable() {
      this.formTable.searchReport(this.formTable.searchObj);
    },

    // 排序
    customSortMethod({ property, order }) {
      if (this.property === property && this.order === order) {
        return;
      } else {
        this.property = property;
        this.order = order;
        order
          ? (this.formTable.searchBodyParams.orderBy = property + ' ' + order)
          : (this.formTable.searchBodyParams.orderBy = '');
        this.formTable.searchReport(this.formTable.searchObj);
      }
    },

    // 列预览
    rowFileView(row) {
      if (!row.FILEID) {
        return this.$message.error('预览文件不存在');
      } else {
        fileView(row.FILEID);
      }
    },
    // 发票列预览
    rowFileViewFP(row) {
      // if (!row.FILEID) {
      //   return this.$message.error('预览文件不存在');
      // } else {
      //   // this.$message.success('发票已经过sir校验');
      //   // fileView(row.FILEID);
      //   this.rowTable = row;
      //   this.FPDialogVisible = true;
      // }
      if (row.FPHM) {
        this.rowTable = row;
        this.FPDialogVisible = true;
      } else {
        // this.rowTable = {};
        // this.$message.error('发票号码不存在');
        if (!row.FILEID) {
          this.$message.error('预览文件ID不存在');
        } else {
          fileView(row.FILEID);
        }
      }
    },
    rowFileoVio(row) {
      if (!row.annexId) {
        return this.$message.error('预览文件不存在');
      } else {
        fileView(row.annexId);
      }
    },
    changeItemOption(payload) {
      const { item, option } = payload;
      item.opintion = option;
      // item.opintion = option;
    },

    // 特殊url请求,item为当前操作对象,value为数据,index为行数
    getUrlRequire(item, value, index) {
      // 改表单是否有other?
      if (this.formTable.otherUrlRequire.length) {
        const { dataIndex } = item;
        // 改操作对象是否为other需要的dataindex
        if (this.formTable.otherUrlDataindex.includes(dataIndex)) {
          for (const i in this.formTable.otherUrlParams[index]) {
            let otheAllParams = true;
            this.formTable.otherUrlParams[index][i][dataIndex] &&
              (this.formTable.otherUrlParams[index][i][
                dataIndex
              ].value = value);
            for (const k in this.formTable.otherUrlParams[index][i]) {
              !this.formTable.otherUrlParams[index][i][k]['value'] &&
                (otheAllParams = false);
            }
            const findObj = this.formTable.otherUrlRequire.find(
              v => v.dataIndex === i
            );
            if (
              otheAllParams &&
              findObj &&
              findObj.componentType !== 'select'
            ) {
              const otherKey = this.formTable.otherUrlParams[index][i];
              const endREquestPayload = dealRequestData(
                findObj.focusUrlParams,
                otherKey
              );
              getCommonData(endREquestPayload, findObj.focusUrl).then(
                ({ data }) => {
                  const { success, message } = data;
                  if (success) {
                    this.formTable.bodys.forEach(v => {
                      v[findObj.dataIndex] = data.data.result;
                    });
                  } else {
                    this.formTable.bodys.forEach(v => {
                      v[findObj.dataIndex] = '';
                    });
                    this.$message.error(message);
                  }
                }
              );
            }
          }
          this.$forceUpdate();
        }
      }
    },
    getTableHeight() {
      this.$nextTick(() => {
        const tableComponentHight =
          this.$refs.tableComponentRef &&
          this.$refs.tableComponentRef.offsetHeight;
        const searchListHight =
          (this.$refs.searchListRef && this.$refs.searchListRef.offsetHeight) ||
          0;
        const tableUploadHight =
          (this.$refs.tableUploadRef &&
            this.$refs.tableUploadRef.offsetHeight) ||
          0;
          // 表单竖向的高度为自适应
        if (this.isVerticalForm) {
          // this.getTableSrollHeight();
          const headHight = this.formTable.styleHead.lineHeight;
          this.tableHeight = headHight + (this.formTable.bodys.length * 40 || 40) + 14 + 'px';
        } else {
          this.tableHeight =
          tableComponentHight - searchListHight - tableUploadHight - 5 + 'px';
        }
      });
    },
    // 获取表格宽度和表头宽度
    // getTableSrollHeight() {
    //   let headWidth = 0;
    //   const tableHeadWidth = (arr) => {
    //     arr.forEach(i => {
    //       if (i.children && i.children.length) {
    //         tableHeadWidth(i.children);
    //       } else {
    //         headWidth += i.width || 200;
    //       }
    //     });
    //   };
    //   tableHeadWidth(this.formTable.headers);
    // },
    // 下载(15,17)
    newBtndownLoad(row, status) {
      const { FORMGUID, FILENO, PROGRAMNAME2 } = row;
      if (!FORMGUID || !PROGRAMNAME2) {
        return this.$message.error('文件参数不存在');
      }
      downLoadNotice({
        FORMGUID,
        STATUS: status,
        FILENO: FILENO || ''
      }).then(res => {
        this.saveFileToLocal(res, PROGRAMNAME2);
      });
    },
    saveFileToLocal(blob, fileName) {
      const a = document.createElement('a');
      const url = window.URL.createObjectURL(blob);
      const filename = fileName;
      a.href = url;
      a.download = filename;
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();
    },
    // 预览
    newBtnAdd(row, status) {
      const { FORMGUID } = row;
      getNotice({
        FORMGUID: FORMGUID,
        STATUS: status
      }).then(res => {
        const { success, data } = res;
        if (success && data.CONTENT) {
          this.editorBtnflag = true;
          this.$nextTick(() => {
            this.editor = new E('#ylEditor');
            // this.editor.config.height = 700;
            this.editor.create();
            this.editor.txt.html(data.CONTENT);
            this.editorstatus = status;
            this.editorGuid = FORMGUID;
          });
        } else {
          this.$message.error('预览失败');
        }
      });
    },
    editorHandle() {
      this.editor.destroy();
      this.editor = null;
      this.editorBtnflag = false;
    },
    operationClick(row, index) {
      const id = this.tableType;
      if (id === 14) {
        this.rowFileView(row);
      } else if (id === 15 || id === 17) {
        const i = id === 15 ? 0 : 1;
        index ? this.newBtndownLoad(row, i) : this.newBtnAdd(row, i);
      } else if (id === 18) {
        this.reportDownRow(row);
      } else if (id === 20) {
        console.log('bianji');
      } else if (id === 24) {
        this.rowFileViewFP(row);
      } else if (id === 25) {
        index ? this.reportDownRow(row) : this.rowFileView(row);
      }
    },
    reportDownRow(row) {
      const { FILEID, FILENAME } = row;
      if (!FILEID || !FILENAME) {
        return this.$message.error('文件参数不存在');
      }
      downFileNew({
        id: FILEID,
        fileName: FILENAME
      }).then(res => {
        this.saveFileToLocal(res, FILENAME);
      });
    },
    toggleFlag(item) {
      this.$set(item, 'myToggleFlag', !item.myToggleFlag);
      this.$forceUpdate();
    },
    // 点击超链接
    urlLinkClick(head, item) {
      const { hyperlinks } = head;
      if (!hyperlinks || !hyperlinks.path) {
        return this.$message.warning(`${head.title}未配置跳转地址参数`);
      } else {
        const { path, open, query } = hyperlinks;
        const pathQuery = {};
        query.forEach(i => {
          pathQuery[i.key] = i.value || item[i.dataIndex];
        });
        const params = {
          path,
          query: pathQuery
        };
        if (open) {
          const routeUrl = this.$router.resolve(params);
          const tempwindow = window.open('_blank'); // 先打开页面
          tempwindow.location = routeUrl.href; // 后更改页面地址
        } else {
          this.$router.push(params);
        }
      }
    },
    FPDialogSure() {
      if (!this.rowTable.FILEID) {
        this.$message.error('预览文件ID不存在');
      } else {
        this.FPDialogVisible = false;
        fileView(this.rowTable.FILEID);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tableComponent {
  height: 100%;
  .urlLink{
    cursor: pointer;
    text-decoration: underline;
    // &:visited {
    //   color: red;
    // }
    &:focus { color: red; }
    // &:hover { color: #F0F; }
    // &-active { color: #F0F; }
  }
}
.tableComponent-search {
  padding-top: 10px;
  /deep/.el-form-item__label{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .tableComponent-search-first {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-form{
      width: calc(100% - 100px);
    }
    .tableComponent-search-first-font {
      color: #51aeff;
      display: inline-block;
      padding-top: 10px;
      padding-left: 20px;
      cursor: pointer;
    }
    .tableComponent-search-first-btn {
      height: 40px;
    }
  }
  .tableComponent-search-more{
    .el-form{
      width: calc(100% - 100px);
    }
  }
}
.table-upload {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 17px;
  padding-top: 16px;
}
.padding-LR-8 {
  padding: 0 8px 0 8px;
}
.delete {
  color: #fc5c5c;
  cursor: pointer;
  &:hover {
    border-bottom: 1px solid #fc5c5c;
    padding-bottom: 3px;
  }
}
.add {
  color: #1492ff;
  cursor: pointer;
  &:hover {
    border-bottom: 1px solid #1492ff;
    padding-bottom: 3px;
  }
}
::v-deep .row--radio,
::v-deep .row--checked {
  background-color: #e6f7ff !important;
}
/deep/.w-e-text-container {
  height: calc(100vh - 180px) !important;
}
/deep/.vxe-cell--filter .vxe-filter--btn {
  // color: #1492FF
  color: var(--filterColor, #ccc);
}
.myEllipsis /deep/ input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prefix_icon {
  cursor: pointer;
  font-size: 12px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // overflow: hidden;

  > div {
    height: 33%;
    position: relative;
    // top: -5px;
    color: #fff;
    // position: absolute;
  }
    .prefix_icon_bg {
      height: 35px;
      width: 30px;
      position: absolute;
      background-color: #1492FF;
      top: 2px;
      border-radius: 2px;
    }
}
.prefix_icon_search{
  > div {
    top: -5px;
    // position: absolute;
  }
}
.FPText{
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #1492FF;
}
</style>
